<template>
  <div class="tag-word-container">
    <el-row :gutter="24">
      <el-col :span="4"
              :xs="24">
        <cms-tagword-group-tree 
          ref="groupTree"
          :new-btn="true"    
          @node-click="handleTreeNodeClick">
        </cms-tagword-group-tree>
      </el-col>
      <el-col :span="20"
              :xs="24">
        <el-row :gutter="24" class="mb8">
          <el-col :span="12">
            <div style="line-height: 36px;">
              <el-button type="primary"
                          icon="el-icon-plus"
                          size="mini"
                          plain
                          :disabled="selectedGroupId==''"
                          @click="handleAdd">新增</el-button>
              <el-button type="danger"
                          icon="el-icon-delete"
                          size="mini"
                          plain
                          :disabled="selectedGroupId==''||selectedIds.length==0"
                          @click="handleDelete">删除</el-button>
            </div>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-form :model="queryParams"
                    ref="queryForm"
                    :inline="true"
                    class="el-form-search">
              <el-form-item prop="query">
                <el-input v-model="queryParams.query" size="mini" placeholder="输入TAG词查询">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                          icon="el-icon-search"
                          size="mini"
                          @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh"
                          size="mini"
                          @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-table 
            v-loading="loading"
            :data="wordList"
            @selection-change="handleSelectionChange"
            @row-dblclick="handleEdit">
            <el-table-column type="selection"
                            width="50"
                            align="center" />
            <el-table-column type="index"
                            label="序号"
                            align="center"
                            width="50" />
            <el-table-column label="TAG词"
                            align="left"
                            prop="word" />
            <el-table-column label="引用次数"
                            align="center"
                            prop="useCount" 
                            width="120"/>
            <el-table-column label="点击次数"
                            align="center"
                            prop="hitCount" 
                            width="120"/>
            <el-table-column label="添加时间"
                              align="center"
                              width="160">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="添加人"
                            align="center"
                            width="120"
                            prop="createBy" />
            <el-table-column label="操作"
                            align="center"
                            width="180" 
                            class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button 
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)">编辑</el-button>
                <el-button 
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="loadWordList"
          />
        </el-row>
      </el-col>
    </el-row>
    <!-- 添加TAG词弹窗 -->
    <el-dialog title="diagTitle"
               :visible.sync="open"
               :close-on-click-modal="false"
               width="500px"
               append-to-body>
      <el-form ref="form"
               :model="form"
               :rules="rules"
               label-width="80px">
        <el-form-item label="TAG词"
                      prop="word">
          <el-input v-model="form.word" />
        </el-form-item>
        <el-form-item label="备注"
                      prop="remark">
          <el-input v-model="form.remark" />
        </el-form-item>
        <el-form-item label="图片" 
                      prop="logo">
          <cms-logo-view v-model="form.logo" :src="form.logoSrc"
                          :width="218" :height="150"></cms-logo-view>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="closeDialog(false)">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
.el-form-search .el-form-item {
  margin-bottom: 0;
}
</style>
<script>
import { getTagWordList, addTagWord, editTagWord, deleteTagWord } from "@/api/word/tagWord";
import CMSTagWordGroupTree from '@/views/cms/word/tagWordGroupTree';
import CMSLogoView from '@/views/cms/components/LogoView';

export default {
  name: "CMSTagWord",
  components: {
    "cms-logo-view": CMSLogoView,
    'cms-tagword-group-tree': CMSTagWordGroupTree
  },
  data () {
    return {
      loading: false,
      selectedGroupId: '',
      selectedIds: '',
      wordList: [],
      total: 0,
      queryParams: {
        query: undefined,
        groupId: undefined,
        pageSize: 20,
        pageNo: 1
      },
      diagTitle: "",
      open: false,
      form: {},
      rules: {
        word: [
          { required: true, message: "TAG词不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {

  },
  methods: {
    handleTabClick (tab, event) {
    },
    handleTreeNodeClick(data) {
      this.selectedGroupId = data && data != null ? data.id : '';
      if (this.selectedGroupId !== this.queryParams.groupId) {
        this.queryParams.groupId = this.selectedGroupId;
        if (this.selectedGroupId != '') {
          this.loadWordList();
        }
      }
    },
    loadWordList () {
      this.loading = true;
      getTagWordList(this.queryParams).then(response => {
        if (response.code == 200) {
          this.wordList = response.data.rows;
          this.total = parseInt(response.data.total);
          this.loading = false;
        }
      });
    },
    reset () {
      this.form = {};
    },
    handleQuery () {
      this.queryParams.pageNo = 1;
      this.loadWordList();
    },
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleSelectionChange (selection) {
      this.selectedIds = selection.map(item => item.wordId);
    },
    closeDialog(loadList) {
      this.open = false;
      this.reset();
      loadList && this.loadWordList();
    },
    handleAdd () {
      this.reset();
      this.diagTitle = "添加TAG词";
      this.open = true;
    },
    handleEdit (row) {
      this.reset();
      this.form = row
      this.diagTitle = "编辑TAG词";
      this.open = true;
    },
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.groupId = this.selectedGroupId;
          if (this.form.wordId) {
            editTagWord(this.form).then(response => {
              if (response.code == 200) {
                this.$modal.msgSuccess(response.msg);
                this.closeDialog(true);
              }
            }); 
          } else {
            addTagWord(this.form).then(response => {
              if (response.code == 200) {
                this.$modal.msgSuccess(response.msg);
                this.closeDialog(true);
              }
            }); 
          }
        }
      });
    },
    handleDelete (row) {
      const wordIds = row.wordId ? [ row.wordId ] : this.selectedIds;
      this.$modal.confirm('是否确认删除选中的TAG词?').then(function() {
        return deleteTagWord(wordIds);
      }).then((response) => {
        this.$modal.msgSuccess(response.msg);
        this.loadWordList();
      }).catch(() => {});
    }
  }
};
</script>